<template>
  <div class="stats-page">
    <!-- 统计类型切换 -->
    <div class="stats-tabs">
      <button
        v-for="tab in tabs"
        :key="tab.type"
        :class="{ active: activeTab === tab.type }"
        @click="activeTab = tab.type"
      >
        {{ tab.title }}
      </button>
    </div>

    <!-- 时间范围选择 -->
    <div class="time-range">
      <select v-model="timeRange">
        <option value="week">本周</option>
        <option value="month">本月</option>
        <option value="quarter">本季度</option>
        <option value="year">本年</option>
        <option value="custom">自定义</option>
      </select>
    </div>

    <!-- 图表展示区 -->
    <div class="chart-container">
      <div v-if="activeTab === 'client'"
class="chart-card">
        <h3>客户数据统计</h3>
        <div ref="clientChart"
class="chart-box" />
        <div class="summary">
          <div class="summary-item">
            <span class="label">新增客户</span>
            <span class="value">24</span>
          </div>
          <div class="summary-item">
            <span class="label">活跃客户</span>
            <span class="value">156</span>
          </div>
        </div>
      </div>

      <div v-if="activeTab === 'contract'"
class="chart-card">
        <h3>合同数据统计</h3>
        <div ref="contractChart"
class="chart-box" />
        <div class="summary">
          <div class="summary-item">
            <span class="label">签约数量</span>
            <span class="value">18</span>
          </div>
          <div class="summary-item">
            <span class="label">合同金额</span>
            <span class="value">¥245,000</span>
          </div>
        </div>
      </div>

      <div v-if="activeTab === 'case'"
class="chart-card">
        <h3>案件数据统计</h3>
        <div ref="caseChart"
class="chart-box" />
        <div class="summary">
          <div class="summary-item">
            <span class="label">新增案件</span>
            <span class="value">9</span>
          </div>
          <div class="summary-item">
            <span class="label">平均处理时长</span>
            <span class="value">3.2天</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 导出按钮 -->
    <button class="export-btn">导出报表</button>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue'

  const activeTab = ref('client') // client/contract/case
  const timeRange = ref('month')

  const tabs = ref([
    { type: 'client', title: '客户统计' },
    { type: 'contract', title: '合同统计' },
    { type: 'case', title: '案件统计' },
  ])

  // 模拟图表初始化
  onMounted(() => {
    // 实际项目中这里会初始化ECharts图表
    console.log('初始化图表')
  })
</script>

<style scoped lang="scss">
  .stats-page {
    padding: 15px;

    .stats-tabs {
      display: flex;
      margin-bottom: 15px;
      border-bottom: 1px solid #eee;

      button {
        flex: 1;
        padding: 12px;
        background: none;
        border: none;
        font-size: 14px;
        color: #666;
        position: relative;

        &.active {
          color: #1989fa;
          font-weight: bold;

          &::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 20%;
            right: 20%;
            height: 3px;
            background: #1989fa;
            border-radius: 3px;
          }
        }
      }
    }

    .time-range {
      margin-bottom: 15px;

      select {
        width: 100%;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: white;
      }
    }

    .chart-container {
      .chart-card {
        background: white;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

        h3 {
          margin: 0 0 15px 0;
          font-size: 16px;
        }

        .chart-box {
          height: 200px;
          background: #f9f9f9;
          border-radius: 4px;
          margin-bottom: 15px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #999;
        }

        .summary {
          display: flex;
          gap: 15px;

          .summary-item {
            flex: 1;
            padding: 10px;
            background: #f5f5f5;
            border-radius: 4px;
            text-align: center;

            .label {
              display: block;
              font-size: 12px;
              color: #999;
              margin-bottom: 5px;
            }

            .value {
              display: block;
              font-size: 18px;
              font-weight: bold;
              color: #333;
            }
          }
        }
      }
    }

    .export-btn {
      width: 100%;
      padding: 12px;
      background: #1989fa;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      margin-top: 15px;
    }
  }
</style>
